<template>
  <div class='container'>
       <div class="m-title"><span class="icon"></span>查看脱敏信息日志列表</div>
         <el-form
      ref="formDataRef"
      :model="desensitizationLogFormData"
      :label-position="labelPosition"
      label-width="100px"
    >
    <el-row :gutter="10">
        <el-col :span="6">
             <el-form-item label="查看人名称"  >
                <el-input
                  placeholder="请输入内容"
                  v-model="desensitizationLogFormData.custName"
                  class="input-with-select"
                >
                 
                </el-input>
              </el-form-item>
        </el-col>
        <el-col :span="6">
             <el-form-item label="查看人登录账号">
                <el-input
                  placeholder="请输入内容"
                  v-model="desensitizationLogFormData.loginAccount"
                  class="input-with-select"
                >
                 
                </el-input>
              </el-form-item>
        </el-col>
         <el-col :span="6">
             <el-form-item label="操作时间">
                <el-date-picker
                    v-model="desensitizationLogFormData.operationTime"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
        </el-col>
         <el-col :span="6">
             <el-button type="primary">查看</el-button>
            <el-button type="primary">清空</el-button>
        </el-col>
    </el-row>
    </el-form>
     <DicTable
      ref="dictable"
      class="m-table"
      stripe
      :columnData="tableColumns"
      max-height="400"
      :tableData="tableData"
      :loading="tableLoading"
      :currentPage="tablePage.page"
      :pageSize="tablePage.pageSize"
      :totalResult="tablePage.totalResult"
      :pager="true"
      @on-page-change="handlePageChange"
    >
      <template #nickname111header="{ row }">
        <a href="">{{row.nickname}}</a>
      </template>
    </DicTable>

  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
        DicTable
    },
    // 这里存放数据
    data () {
      return {
          labelPosition:"left",
          desensitizationLogFormData:{
              custName:"查看人名称",
              loginAccount:"登陆认帐号",
              operationTime:"操作时间开始时间",

          },
           tableColumns: [
     
        { type: "seq", width: 60, fixed: null  },
        { field: "name", title: " 查看人名称", width: 200,showOverflow:true},
        { slotName: "nickname1111", title: "查看人登录账号", width: 300 ,showOverflow:true},
        { field: "sex", title: "IP地址", showOverflow:true},
        { field: "role", title: "操作时间 ", showOverflow:true },
        { field: "operationType", title: "操作类型 ", showOverflow:true},
        { field: "operatingItems", title: "操作事项 ", showOverflow:true},
       
      ],
      tableData: [
        {id:10001,name:"Test1111111111111111111111111",nickname:"T1",role:"Develop",sex:"Man",age:28,address:"vxe-table 从入门到放弃"},
        {id:10002,name:"Test2",nickname:"T2",role:"Test",sex:"Women",age:22,address:"Guangzhou"},
        {id:10003,name:"Test3",nickname:"T3",role:"PM",sex:"Man",age:32,address:"Shanghai"},
        {id:10004,name:"Test4",nickname:"T4",role:"Designer",sex:"Women ",age:23,address:"vxe-table 从入门到放弃"},
        {id:10005,name:"Test5",nickname:"T5",role:"Develop",sex:"Women ",age:30,address:"Shanghai"},
        {id:10006,name:"Test6",nickname:"T6",role:"Designer",sex:"Women ",age:21,address:"vxe-table 从入门到放弃111111111111111111111111"},
     
      ],
      tableLoading: false,
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 8,
      },
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {
        handlePageChange(val){
            
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
  .m-table{
      margin-top: 0.3rem;
  }
.container{
    padding: 0.1rem 0.2rem;
    background: #fff;
}
.m-title {
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-box {
  background-color: rgba(221, 221, 221, 0.2);
  padding: 0.13rem;
  margin-top: 0.2rem;
  text-align: center;
  font-size: 0.14rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: #f56f3c;
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
</style>